<template>
  

<div >
      <el-form :inline="true">  
      <el-form-item label="工单编号" style="width: 200px;">
            <el-input v-model="p.workOrderCoding" />
          </el-form-item>
          <el-form-item label="工单名称"  style="width: 200px;">
            <el-input v-model="p.WorkOrderName" />
          </el-form-item>
    
 
           <el-form-item label="工单类型" prop="WorkOrderType" style="width: 200px;">
            <el-input v-model="p.WorkOrderType" />
          </el-form-item>
          <el-form-item label="产品编号" prop="productNumber" style="width: 200px;">
            <el-input v-model="p.productNumber" />
          </el-form-item>
            <el-form-item label="产品名称" prop="productName" style="width: 200px;">
            <el-input v-model="p.productName" />
          </el-form-item>   
</el-form>
       
    
        
          <el-button  type="success"  plain @click="getMenus()">
    查询 
  </el-button>
</div>

    <div>
        <el-button  type="primary" plain @click="Eject.dialogFormVisible = true">
    新增
  </el-button>
  <el-button type="success" plain @click="Leadinto()">
    导入
  </el-button>
  <el-button type="info" plain @click="Derive()">
    导出
  </el-button>
  <el-button plain type="warning"  @click="print('test')">打印</el-button>
      <el-table :data="tableData" style="width: 100%">
       
        <el-table-column prop="workOrderCoding" label="工单编码"  />
        <el-table-column prop="workOrderName" label="工单名称"  />
        <el-table-column prop="workOrderType" label="工单类型"  />
        <el-table-column prop="workorderSource" label="工单来源"  />
        <el-table-column  prop="orderNumber" label="订单编号" />
        <el-table-column prop="productNumber" label=" 产品编号"  />
        <el-table-column prop="productName" label="产品名称"  />
        <el-table-column prop="specifications" label="规格型号"  />
        <el-table-column prop="unit" label="单位"  />
        <el-table-column  prop="workOrderNum" label="工单数量" />
        <el-table-column prop="adjustQuantity" label="调整数量"  />
        <el-table-column prop="quantityProduced" label="已生产数量"  />
        <el-table-column prop="lotNumber" label="批次号"  />
        <el-table-column prop="customerCode" label="客户编码"  />
        <el-table-column  prop="customerNamwe" label="客户名称" />
        <el-table-column prop="requestDate" label="入库日期" width="180">
        <template #default="scope">
          {{ scope.row.requestDate.substring(0, 10) }}
        </template>
      </el-table-column>
      
        <el-table-column prop="state" label="状态"  />
        <el-table-column prop="supplierCode" label="供应商编码"  />
        <el-table-column prop="supplierName" label="供应商名称"  />
        <el-table-column prop="note" label="备注"  />
        <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click="shan(scope.row.workOrderId)"
            >删除</el-button >
          <el-button link type="primary" size="small" @click="xiu(scope.row)"
            >修改</el-button>
           
        </template>
      </el-table-column>



       
      </el-table>
      <tr>
        <td>
          <el-pagination
      v-model:current-page="p.index"
      v-model:page-size="p.size"
      :page-sizes="[10, 20, 30, 40]"
     
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="p.totalCount"
      @size-change="getMenus()"
      @current-change="getMenus()"
    />
        </td>
        <!-- 新增 -->
        <td>
  <el-dialog
    v-model="Eject.dialogFormVisible"
    title="新增"
    width="1000"
    :before-close="handleClose"
  >
    <span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="form-row">
          <el-form-item label="编号:" :label-width="Eject.formLabelWidth">
            <el-input
              v-model="ruleForm.workOrderCoding"
              autocomplete="off"
              style="width: 180px; height: 30px"
              :readonly="ruleForm.autoGenerate"
              clearable
              @click.native="handleCodeClick"
            />
            <template #prepend>MO</template>
            <el-switch
              width="40"
              v-model="ruleForm.autoGenerate"
              active-text="自动生成"
              active-color="#67C23A"
              @change="handleSwitchChange"
            />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工单名称" prop="workOrderName" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.workOrderName" />
          </el-form-item>
          <el-form-item label="工单类型" prop="workOrderType" style="flex: 1;">
            <el-select v-model="ruleForm.workOrderType" placeholder="请选择">
              <el-option label="自产" value="自产" />
              <el-option label="待产" value="待产" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
      

          <el-form-item label="工单来源" prop="workorderSource" style="flex: 1;">
            <el-select v-model="ruleForm.workorderSource" placeholder="请选择">
              <el-option label="客户订单" value="客户订单" />
              <el-option label="库存备货" value="库存备货" />
            </el-select>
          </el-form-item>


          <el-form-item label="订单编号" prop="orderNumber" style="flex: 1;">
            <el-input v-model="ruleForm.orderNumber" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="产品编号" prop="productNumber" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.productNumber" />
          </el-form-item>
          <el-form-item label="产品名称" prop="productName" style="flex: 1;">
            <el-input v-model="ruleForm.productName" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="规格型号" prop="specifications" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.specifications" />
          </el-form-item>
          <el-form-item label="单位" prop="unit" style="flex: 1;">
            <el-input v-model="ruleForm.unit" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工单数量" prop="workOrderNum" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.workOrderNum" />
          </el-form-item>
          <el-form-item label="调整数量" prop="adjustQuantity" style="flex: 1;">
            <el-input v-model="ruleForm.adjustQuantity" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="已生产数量" prop="quantityProduced" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.quantityProduced" />
          </el-form-item>
          <el-form-item label="批次号" prop="lotNumber" style="flex: 1;">
            <el-input v-model="ruleForm.lotNumber" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="客户编码" prop="customerCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.customerCode" />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerNamwe" style="flex: 1;">
            <el-input v-model="ruleForm.customerNamwe" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="需求日期" required style="flex: 1; margin-right: 10px;">
            <el-date-picker
              v-model="ruleForm.requestDate"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state" style="flex: 1;">
            <el-input v-model="ruleForm.state" />
          </el-form-item>


          
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="供应商编码" prop="supplierCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForm.supplierCode" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplierName" style="flex: 1;">
            <el-input v-model="ruleForm.supplierName" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="备注" prop="note">
            <el-input v-model="ruleForm.note" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">
            添加
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
      </el-form>
    </span>
  </el-dialog>
</td>    

        <!-- 修改 -->
        <td>
  <el-dialog
    v-model="Eject.edialogFormVisible"
    title="修改"
    width="1000"
    :before-close="handleClose"
  >
    <span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <div class="form-row">
          <el-form-item label="编号:" :label-width="Eject.formLabelWidth">
            <el-input
              v-model="ruleFormm.workOrderCoding"
              autocomplete="off"
              style="width: 180px; height: 30px"
              :readonly="ruleFormm.autoGenerate"
              clearable
              @click.native="handleCodeClick"
            />
            <template #prepend>MO</template>
            <el-switch
              width="40"
              v-model="ruleFormm.autoGenerate"
              active-text="自动生成"
              active-color="#67C23A"
              @change="handleSwitchChange"
            />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工单名称" prop="workOrderName" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.workOrderName" />
          </el-form-item>
          <el-form-item label="工单类型" prop="workOrderType" style="flex: 1;">
            <el-select v-model="ruleFormm.workOrderType" placeholder="请选择">
              <el-option label="自产" value="自产" />
              <el-option label="待产" value="待产" />
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工单来源" prop="workorderSource" style="flex: 1;">
            <el-select v-model="ruleFormm.workorderSource" placeholder="请选择">
              <el-option label="客户订单" value="客户订单" />
              <el-option label="库存备货" value="库存备货" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNumber" style="flex: 1;">
            <el-input v-model="ruleFormm.orderNumber" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="产品编号" prop="productNumber" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.productNumber" />
          </el-form-item>
          <el-form-item label="产品名称" prop="productName" style="flex: 1;">
            <el-input v-model="ruleFormm.productName" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="规格型号" prop="specifications" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.specifications" />
          </el-form-item>
          <el-form-item label="单位" prop="unit" style="flex: 1;">
            <el-input v-model="ruleForm.unit" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="工单数量" prop="workOrderNum" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.workOrderNum" />
          </el-form-item>
          <el-form-item label="调整数量" prop="adjustQuantity" style="flex: 1;">
            <el-input v-model="ruleFormm.adjustQuantity" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="已生产数量" prop="quantityProduced" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.quantityProduced" />
          </el-form-item>
          <el-form-item label="批次号" prop="lotNumber" style="flex: 1;">
            <el-input v-model="ruleFormm.lotNumber" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="客户编码" prop="customerCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.customerCode" />
          </el-form-item>
          <el-form-item label="客户名称" prop="customerNamwe" style="flex: 1;">
            <el-input v-model="ruleFormm.customerNamwe" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="需求日期" required style="flex: 1; margin-right: 10px;">
            <el-date-picker
              v-model="ruleFormm.requestDate"
              type="date"
              aria-label="Pick a date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="状态" prop="state" style="flex: 1;">
            <el-input v-model="ruleFormm.state" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="供应商编码" prop="supplierCode" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleFormm.supplierCode" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="supplierName" style="flex: 1;">
            <el-input v-model="ruleFormm.supplierName" />
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="备注" prop="note">
            <el-input v-model="ruleFormm.note" />
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="xiugai()">
            修改
          </el-button>
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
        
      </el-form>
      <div>
        <el-table :data="aa" style="width: 100%">
          <el-table-column prop="itemnumber" label="物料编号"  />
        <el-table-column prop="boMunit" label=" BOM单位"  />
        <el-table-column prop="boMmaterial" label=" BOM物资"  />
        <el-table-column prop="expectedUsage" label="预计使用量"  />
        <el-table-column  prop="bomType" label="规格型号" />
    <el-table-column label="操作" >
      <template #default="scope">
         
          <el-button link type="primary" size="small" @click="yulan(scope.row)"
            >预览</el-button>
           
        </template>
    </el-table-column>
          </el-table>



          <td>
            <!-- 分页 -->


          <el-pagination
      v-model:current-page="pp.index"
      v-model:page-size="pp.size"
      :page-sizes="[10, 20, 30, 40]"
     
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pp.totalCount"
      @size-change=" BOM()"
      @current-change="BOM()"
    />
        </td>
      </div>
    </span>
  </el-dialog>
</td>    

      </tr>
    </div>
  <td>
      <!-- 预览 -->
      <td>
  <el-dialog
    v-model="Eject.yydialogFormVisible"
    title="预览"
    width="1000"
    :before-close="handleClose"
  >
    <span>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="物料编号" prop="itemnumber" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForms.itemnumber" />
          </el-form-item>
        
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="生产工单" prop="itemnumber" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForms.itemnumber" />
          </el-form-item>
          <el-form-item label="BOM单位" prop="boMunit" style="flex: 1;">
            <el-input v-model="ruleForms.boMunit" />
          </el-form-item>
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
          <el-form-item label="BOM物资" prop="boMmaterial" style="flex: 1; margin-right: 10px;">
            <el-input v-model="ruleForms.boMmaterial" />
          </el-form-item>
      
        </div>
        <div class="form-row" style="display: flex; justify-content: space-between;">
           
          <el-form-item label="预计使用量" prop="expectedUsage" style="flex: 1;">
            <el-input v-model="ruleForms.expectedUsage" />
          </el-form-item>
          <el-form-item label="规格型号" prop="bomType" style="flex: 1;">
            <el-input v-model="ruleForms.bomType" />
          </el-form-item>
        </div>
       
        <el-form-item>
         
          <el-button @click="handleClose()">关闭</el-button>
        </el-form-item>
      </el-form>
    </span>
  </el-dialog>
</td>    
  </td>

  </template>
  
  <script setup lang="ts">
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const aa = ref([]);
const tableData = ref([]);
onMounted(() => {
  getMenus();
});
const p = reactive({
  index: 1,
  size: 5,
  totalCount: 0,
  totalPage: 0,
  workOrderCoding: "",
  WorkOrderName: "",
  WorkOrderType: "",
  productNumber: "",
  productName: "",
  customerCode: "",
  customerNamwe: "",
  requestDate: "",
  customerName: "",
});

//显示
const getMenus = () => {
  axios({
    url:apiUrl+"/T5/WorkOrder/GetWorkOrder",
    method: "get",
    params: p,
  }).then((res) => {
    console.log(res.data.data);
    tableData.value = res.data.data;
    p.totalCount = res.data.totalCount;
    p.totalPage = res.data.totalPage;
  });
};

const shan = (workOrderId: any) => {
  ElMessageBox.confirm("确认删除吗?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios({
        url:apiUrl+"/T6/Works/DeleteWorks",
        method: "put",
        data: {
          workOrderId: workOrderId,
        },
      }).then((res) => {
        if (res.data.code == 204) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getMenus();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

///新增aaa
const handleClose = () => {
  Eject.dialogFormVisible = false;
  Eject.edialogFormVisible = false;
  Eject.yydialogFormVisible = false;
};

const ruleForm = reactive({
  workOrderId:0,
  workOrderCoding: "",
  workOrderName: "",
  workOrderType: "",
  workorderSource: "",
  orderNumber: "",
  productNumber: "",
  productName: "",
  specifications: "",
  unit: "",
  workOrderNum: "",
  adjustQuantity: "",
  quantityProduced: "",
  lotNumber: "",
  customerCode: "",
  customerNamwe: "",
  requestDate: "",
  state: "",
  supplierCode: "",
  supplierName: "",
  note: "",
  customerName: "",

  autoGenerate: false, // 是否自动生成
});



const ruleFormm = reactive({
  workOrderId:0,
  workOrderCoding: "",
  workOrderName: "",
  workOrderType: "",
  workorderSource: "",
  orderNumber: "",
  productNumber: "",
  productName: "",
  specifications: "",
  unit: "",
  workOrderNum: "",
  adjustQuantity: "",
  quantityProduced: "",
  lotNumber: "",
  customerCode: "",
  customerNamwe: "",
  requestDate: "",
  state: "",
  supplierCode: "",
  supplierName: "",
  note: "",
  customerName: "",

  autoGenerate: false, // 是否自动生成
});


const submitForm = () => {
  ruleForm.workOrderId=0;
  console.log(ruleForm);
  axios({
    url:apiUrl+"/T6/Works/AddWorkds",
    method: "post",
    data: ruleForm,
  }).then((res) => {
    if (res.data.code == 100) {
      
      ElMessage.success("添加成功");
      getMenus();
      Eject.dialogFormVisible = false;

    }
  });
};

const Eject = reactive({
  dialogFormVisible: false,
  formLabelWidth: "100px",
  title: "",
  Isture: true,
  edialogFormVisible: false,
  yydialogFormVisible: false,
});
// 生成企业（GYLX+时间戳）
const generateCode = () => {
  const timestamp = Date.now(); // 获取精确到毫秒的时间戳
  ruleForm.workOrderCoding = `MO${timestamp}`;
};

const handleSwitchChange = (val: boolean) => {
  ruleForm.autoGenerate = val;
  if (val) {
    generateCode(); // 开启自动生成时立即生成
  } else {
    ruleForm.workOrderCoding = ""; // 关闭时清空编号
  }
};

const handleCodeClick = () => {
  if (ruleForm.autoGenerate) {
    generateCode(); // 点击输入框时重新生成
  }
};

const xiu = (row: any) => {
  Eject.edialogFormVisible = true;
  BOM();
  ruleFormm.workOrderId = row.workOrderId;
  ruleFormm.workOrderCoding = row.workOrderCoding;
  ruleFormm.workOrderName = row.workOrderName;
  ruleFormm.workOrderType = row.workOrderType;
  ruleFormm.workorderSource = row.workorderSource;
  ruleFormm.orderNumber = row.orderNumber;
  ruleFormm.productNumber = row.productNumber;
  ruleFormm.productName = row.productName;
  ruleFormm.specifications = row.specifications;
  ruleFormm.unit = row.unit;
  ruleFormm.adjustQuantity = row.adjustQuantity;
  ruleFormm.workOrderNum = row.workOrderNum;
  ruleFormm.customerName = row.customerName;
  ruleFormm.quantityProduced = row.quantityProduced;
  ruleFormm.lotNumber = row.lotNumber;
  ruleFormm.customerCode = row.customerCode;
  ruleFormm.customerNamwe = row.customerNamwe;
  ruleFormm.requestDate = row.requestDate;
  ruleFormm.state = row.state;
  ruleFormm.supplierCode = row.supplierCode;
  ruleFormm.supplierName = row.supplierName;
  ruleFormm.note = row.note;
};
const xiugai = () => {
  axios({
    url:apiUrl+"/T6/Works/UpdateWorks",
    method: "put",
    data: ruleFormm,
  }).then((res) => {
    if (res.data.code == 206) {
      ElMessage.success("修改成功");
      getMenus();
      Eject.edialogFormVisible = false;
    }
  });
};
//导出生产报工
const Derive = () => {
  window.location.href =apiUrl+"/T5/WorkOrder/ExeclCustomer";
};
//导入生产报工
const Leadinto = () => {
  console.log("执行导入操作");
  const input = document.createElement("input");
  input.type = "file";
  input.accept = ".csv, .xlsx"; // 可以根据实际需求修改允许的文件类型

  input.addEventListener("change", async (event) => {
    const file = event.target.files[0];
    if (file) {
      const formData = new FormData();
      formData.append("file", file);

      const url = apiUrl+"/T6/Works/ImportInventories";
      try {
        const response = await fetch(url, {
          method: "POST",
          body: formData,
        });
        if (response.ok) {
          ElMessage.success("导入成功");
        }

        if (!response.ok) {
          throw new Error(`请求失败，状态码: ${response.status}`);
        }

        const result = await response.json();
        console.log("导入成功，返回结果:", result);
      } catch (error) {
        console.error("导入失败:", error);
      }
    }
  });

  input.click();
};
const pp = reactive({
  index: 1,
  size: 2,
  totalCount: 0,
  totalPage: 0,
});
const BOM = () => {
  axios({
    url: apiUrl+"/T5/BOM/GetBOM",
    method: "get",
    params: pp,
  }).then((res) => {
    console.log(res.data.data);
    aa.value = res.data.data;
    pp.totalCount = res.data.totalCount;
    pp.totalPage = res.data.totalPage;
  });
};

//#region 打印

//定义一些打印相关的常量 可以通用
//打印左右边距
const printMinLeft = 5;
//打印A4宽度px
const a4Width = 595;
//A4的panel设置
const a4Panel = { width: 210, height: 297, paperFooter: 340, paperHeader: 10 };

const headerColNum = 3; //总列数
const titleHeight = 20; //标题行高
const contentWidth = a4Width - printMinLeft * 2; //内容宽度

//定义两个新建打印文本和打印表格列的方法，方便复用代码
//新字段元素：列索引，列数，行索引（从1开始） 中文名 字段名
const newPrintText = (
  col: any,
  colNum: any,
  row: any,
  title: any,
  field: any
) => {
  return {
    options: {
      width: (contentWidth / headerColNum) * colNum,
      height: 20,
      fontSize: 10,
      top: titleHeight + 20 * row,
      left: (contentWidth / headerColNum) * (col - 1) + printMinLeft,
      type: "text",
      title: title,
      field: field,
    },
  };
};
// 新列元素：中文名，字段名。相对宽度（建议1~10）
const newPrintColumn = (title: any, field: any, width: any) => {
  return {
    title: title,
    field: field,
    width: width,
    colspan: 1,
    rowspan: 1,
    align: "center",
  };
};

import { disAutoConnect, hiprint } from "vue-plugin-hiprint";
disAutoConnect(); // 取消自动连接直接打印客户端
hiprint.init(); //初始化
const print = (title: any) => {
  //选择判断
  getMenus();

  //定义需要打印的数据
  let printData = {
    operator: "admin",
    addDate: new Date().toLocaleDateString(),
    details: <any>[],
  };
  printData.details = tableData.value;
  //定义模板和面板，所有打印元素都在面板上，默认A4纸大小
  let hiprintTemplate = new hiprint.PrintTemplate();
  let panel = hiprintTemplate.addPrintPanel(a4Panel);
  //文本标题
  panel.addPrintText({
    options: {
      width: 150,
      height: 20,
      top: 10,
      left: contentWidth / 2 - 30,
      fontSize: 25,
      title: "生产工单明细",
      type: "text",
    },
  });
  //头部内容

  panel.addPrintText(newPrintText(1, 1, 1, "制单人", "operator"));
  panel.addPrintText(newPrintText(2, 1, 1, "创建时间", "addDate"));
  let tmpColumns = [];
  tmpColumns.push(newPrintColumn("工单编码", "workOrderCoding", 3));
  tmpColumns.push(newPrintColumn("工单名称", "workOrderName", 3));
  tmpColumns.push(newPrintColumn("工单类型", "workOrderType", 3));
  tmpColumns.push(newPrintColumn("产品编号", "productNumber", 3));
  tmpColumns.push(newPrintColumn("产品名称", "productName", 3));
  tmpColumns.push(newPrintColumn("规格型号", "specifications", 3));
  panel.addPrintTable({
    options: {
      width: a4Width - printMinLeft * 2,
      top: 80,
      left: printMinLeft,
      field: "details",
      columns: [tmpColumns],
    },
  });
  //打印
  hiprintTemplate.print(printData);
};

//#endregion

// BOM修改11234567890-
const ruleForms = reactive({
  bomId: "",
  itemnumber: "",
  boMunit: "",
  boMmaterial: "",
  expectedUsage:"",
  bomType:""
});
</script>
  
  <style scoped>
</style>